<template>
  <el-dialog
    title="超级验证码"
    :visible.sync="visible"
    @open='getData'
    @close = '$emit("update:dialogVisible", false);success = false;disabled=false'
    size='tiny'
    top='28vh'>
    <section>
      <p class="row" :class='{success}'>

        <el-input ref='superCodeInput' v-model="code" size='large' readonly>

          <template slot="prepend">
            <a @click.stop='setCopy'>复制</a>
        
          </template>

          <el-button slot="append" @click.stop = 'reset' v-if='!success'>更新</el-button>
          <el-button slot="append"  v-else>更新</el-button>

        </el-input>
      </p>
    </section>

  </el-dialog>
</template>

<script>
export default {
	props: {
		dialogVisible: {
			type: Boolean,
			default: false
		}
	},
	watch: {
		dialogVisible (newValue) {
			this.visible = newValue
		}
	},
	data () {
		return {
			visible: false,
			code: '',
			success: false,
			disabled: false
		}
	},
	methods: {
		getData () {
			this.Axios.Post('/twoPsdValidation/querySuperVerifyingCode')
				.then((res) => {
					const { datas } = res.data
					this.code = datas
				})
		},
		setCopy () {
			let target = this.$refs['superCodeInput'].$el.querySelector('input')
			target.select() // 选择对象
			document.execCommand('Copy') // 执行浏览器复制命令
		},
		reset () {
			this.success = true
			this.Axios.Post('/twoPsdValidation/updateSuperVerifyingCode')
				.then((res) => {
					const { datas } = res.data
					this.code = datas
					if (datas) {
						this.disabled = true
					}
				})
		}
	},
}
</script>

<style scoped lang='less'>
.row a {
  cursor: pointer;
}
</style>
<style lang='less'>
.row.success {
  .el-input-group__append {
    background-color: #027de5;
    color: #fff;
    border-color: #027de5;
    a {
      cursor: default;
    }
    .el-button.is-disabled,
    .el-button.is-disabled:focus,
    .el-button.is-disabled:hover {
      color: #fff;
      cursor: not-allowed;
      background-color: #027de5;
      border-color: #027de5;
    }
  }
}
</style>
